<template>
  <v-card outlined height="100%" width="100%" class="d-flex flex-column">
    <v-list two-line>
      <v-subheader>聊天窗口</v-subheader>
      <v-list-item-group color="primary">
        <v-list-item v-for="chat in chats" :key="chat.content" disabled>
          <v-list-item-content>
            <v-list-item-title>
              <v-icon class="pr-2" v-if="chat.teacher" color="yellow"
                >mdi-star</v-icon
              >
              <span v-text="chat.user" />
            </v-list-item-title>
            <v-list-item-subtitle class="pt-2" v-text="chat.content" />
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
    <v-list-item>
      <v-list-item-content class="mt-auto">
        <div>
          <v-text-field
            v-model="chatContent"
            dense
            outlined
            hide-details
            label="聊天信息"
            append-icon="mdi-send"
            @click:append="addChat()"
          />
          <v-file-input
            class="my-2"
            solo
            hide-details
            label="发送文件或图片"
            outlined
            dense
          />
        </div>
      </v-list-item-content>
    </v-list-item>
  </v-card>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "ChatWindow",
  data: () => ({
    chatContent: "",
    name: ""
  }),
  computed: {
    ...mapState({
      user: state => state.discussion.user,
      teacher: state => state.teacher,
      teacherName: state => state.teacherName,
      chats: state => state.chats
    })
  },
  methods: {
    addChat() {
      if (this.chatContent.trim().length !== 0) {
        if (this.teacher) {
          this.name = this.teacherName;
        } else {
          this.name = this.user;
        }
        this.$store.commit("ADD_CHAT", {
          user: this.name,
          content: this.chatContent,
          teacher: this.teacher
        });
        this.chatContent = "";
      }
    }
  }
};
</script>
